<template>
    <div>
        <el-card class="box-card" style="margin-top: 15px;">
            <div slot="header" class="clearfix">
                <span>系统重置</span>
            </div>
            <div>
                <div style="text-align: center;margin-top: 50px;">
                    <el-progress
                            type="dashboard"
                            :width="200"
                            :percentage="percentage"
                            :color="colors"></el-progress>
                </div>
                <div style="text-align: center;height: 50px;">
                    <p v-if="percentage===0">准备系统重置~~</p>
                    <p v-else-if="percentage>0&&percentage<100">系统重置中，已经完成 {{percentage}}% ···</p>
                    <p v-else-if="percentage>=100">系统重置完成！</p>
                </div>
                <div style="text-align: center;height: 50px;">
                    <el-button @click="resetSystem" type="warning">开始重置</el-button>
                </div>
            </div>

        </el-card>
    </div>


</template>

<script>
    import {systemReset, systemResetProgress} from "../../../../api/common";

    export default {
        name: "SystemReset",
        data() {
            return {
                percentage: 0,
                colors: [
                    {color: '#f56c6c', percentage: 20},
                    {color: '#e6a23c', percentage: 40},
                    {color: '#6f7ad3', percentage: 60},
                    {color: '#1989fa', percentage: 80},
                    {color: '#5cb87a', percentage: 100},

                ],
                timer: null,
            }
        },
        methods: {
            increase(val) {
                if (this.percentage > val) {
                    return false;
                }
                this.percentage = val;
                if (this.percentage >= 100) {
                    this.percentage = 100;
                    clearInterval(this.timer)
                }
            },
            resetSystem() {
                this.$confirm('此操作将重置系统，是危险操作, 是否继续?', '警告', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                        this.timer = setInterval(() => {
                            systemResetProgress().then(resp => {
                                console.log(resp.data)
                                this.increase(resp.data)
                            })
                        }, 200)
                        systemReset().then(resp => {
                            if (resp.code === 200) {
                                this.$message({
                                    type: 'success',
                                    message: '系统重置成功!'
                                });

                                this.$notify({
                                    title: '重置成功',
                                    duration: 1000 * 60 * 60,
                                    dangerouslyUseHTMLString: true,
                                    message: `<strong>初始账户：</strong>admin <br/>
                                              <strong>初始密码：</strong>admin <br/>
                                               为了你的账户安全，请尽快修改密码！`,
                                    type: 'success'
                                });
                                setTimeout(() => {
                                    this.$router.push("/login")
                                }, 3000)
                            }
                        }).catch(e => {
                            clearInterval(this.timer)
                        })
                    }
                ).catch(() => {

                });
            },
        }
    }
</script>

<style scoped lang="scss">

</style>